<template>
  <div id="home">
    <!-- 上方bar栏 -->
    <nav-bar class="home-nav">
      <template v-slot:center>
        <div>购物街</div>
      </template>
    </nav-bar>
    <!-- 当tab-control吸顶时显示 -->
    <tab-control class="tab-control-fixed" ref="tabControlFixed" :titles="titles" @tabClick="tabClick" v-show="isTabFixed"/>

    <!-- 滚动优化scroll -->
    <scroll class="content"
      ref="scroll"
      :probe-type="3"
      @scroll="contentScroll"
      :pull-up-load="true"
      @pullingUp="loadMore">
      <!-- banner栏 -->
      <home-swiper :banners="banners" @swiperImageLoad.once="swiperImageLoad"/>
      <!-- 分类推荐栏 -->
      <recommend-view :recommends="recommends"/>
      <!-- 本周流行栏 -->
      <feature-view/>
      <!-- 流行、新款、精选分类栏 -->
      <tab-control class="tab-control" ref="tabControl" :titles="titles" @tabClick="tabClick"/>
      <!-- 商品展示栏 -->
      <goods-list :goods="goods[currentType].list"></goods-list>
    </scroll>

    <!-- 返回顶部 -->
    <back-top @click="backClick" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
import homeSwiper from './child_comps/home_swiper.vue'
import recommendView from './child_comps/recommend_view.vue'
import featureView from './child_comps/feature_view.vue'

import navBar from 'components/common/navbar/navbar'
import scroll from 'components/common/scroll/scroll'
import tabControl from 'components/content/tab_control/tab_control'
import goodsList from 'components/content/goods/goods_list'
import backTop from 'components/content/back_top/back_top'

import { getHomeMultidata, getHomeGoods } from 'network/home'

export default {
  name: "home",
  components: {
    homeSwiper,
    recommendView,
    featureView,
    navBar,
    scroll,
    tabControl,
    goodsList,
    backTop
  },
  data() {
    return {
      banners: [], //存放banner图片的数据
      recommends: [], //用于存放recommend的数据
      titles: ['流行', '新款', '精选'],
      goods: {
        'pop': {page: 0, list: []},
        'new': {page: 0, list: []},
        'sell': {page: 0, list: []},
      },

      isShowBackTop: false, //判断是否显示返回顶部的按钮
      currentType: 'pop', //判断目前所选的tab-control是哪类
      tabOffsetTop: 0, //存放tab-control的初始上边距
      isTabFixed: false, //决定tab-control是否吸顶
      saveY: 0 //记录当前浏览的位置
    }
  },
  activated() {
    // 返回活跃状态时
    this.$refs.scroll.scrollTo(0, this.saveY, 10);
    console.log(this.saveY)
  },
  deactivated() {
    // 离开活跃状态时
    this.saveY = this.$refs.scroll.scroll.y;
  },
  created() {
    /**
     * 请求banner数据
     */
    this.getHomeMultidata()

    /**
     * 请求商品数据
     */
    this.getHomeGoods('pop')
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },
  methods: {
    /**
     * 事件监听相关方法
     */
    tabClick(index) {
      switch(index) {
        case 0:
          this.currentType = 'pop';
          break;
        case 1:
          this.currentType = 'new';
          break;
        case 2:
          this.currentType = 'sell';
          break;
      }
      this.$refs.tabControl.currentIndex = index;
      this.$refs.tabControlFixed.currentIndex = index;
    },

    backClick() {
      this.$refs.scroll.scrollTo(0, 0, 500);
    },

    contentScroll(position) {
      // 判断backtop是否显示
      this.isShowBackTop = ((-position.y) > 1000);
      // 判断tab-control是否吸顶(position: fixed)
      this.isTabFixed = (-position.y) > this.tabOffsetTop;
    },

    loadMore() {
      // 先加载下一页数据
      this.getHomeGoods(this.currentType);
      // 网速慢时，图片未刷新好前防止卡住
      this.$refs.scroll.scroll.refresh();
    },

    // banner图片加载好之后，存储tab-control的offsettop高度
    swiperImageLoad() {
      this.tabOffsetTop = this.$refs.tabControl.$el.nextElementSibling.offsetTop;
    },

    /**
     * 网络请求相关方法
     */
    getHomeMultidata() {
      getHomeMultidata().then(res => {
        this.banners = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      })
    },

    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then(res => {
        this.goods[type].list.push(...res.data.data.list);
        this.goods[type].page = page;

        this.$refs.scroll.finishPullUp();
      })
    }
  }
}
</script>

<style scoped>
  #home {
    height: 100vh;
    position: relative;
  }

  .home-nav {
    color: white;
    background-color: #fb7299;
    /* position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9; */
  }

  .tab-control {
    margin-bottom: 6px;
    /* position: sticky;
    top: 44px; */
    background-color: #fff;
    z-index: 9;
  }

  .tab-control-fixed {
    position: relative;
    z-index: 9;
  }

  .content {
    position: absolute;
    top: 44px;
    right: 0;
    bottom: 49px;
    left: 0;
    overflow: hidden;
  }

  /* .content {
    height: calc(100vh - 93px);
    overflow: hidden;
    margin-top: 44px;
  } */
</style>
